<template>
  <div style="width: 900px;margin: auto">
    <el-card>
      <h1 style="color: #475669">修改视频页面</h1>
      <el-form label-width="80px">
        <el-form-item label="视频标题">
          <el-input placeholder="请输入标题" v-model="video.title"></el-input>
        </el-form-item>
        <el-form-item label="分区" >
          <el-cascader v-model="video.categoryId" :options="categoryArr" :show-all-levels="false" @change="handleChange"/>
        </el-form-item>
        <el-form-item label="封面" >
          <img :src="video.coverUrl" width="200">
           &nbsp;&nbsp; <el-button @click="isUpdateCover=true">重新上传</el-button>
        </el-form-item>
        <el-dialog
            v-model="isUpdateCover"
            width="500px"
            :before-close="handleClose"
            style="text-align: center;overflow: hidden;padding: 0;position:relative;"
        >
          <!--   上传组件开始   -->
          <h1>重新上传封面</h1>
          <el-upload
              v-model:file-list="fileList"
              drag
              action='http://124.71.182.39:28000/upload/uploadImage'
              name="file"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :headers="headers"
              :limit="1"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>

          <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
          </el-dialog>
          <!--   上传组件结束   -->
        </el-dialog>
        <el-form-item>
          <el-button type="primary" @click="postContent">
            修改内容</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import {onBeforeUnmount, onMounted, ref, nextTick} from "vue";
//导入文本编辑器
import Editor from "wangeditor";
import TokenAxios from "@/http/request/TokenAxios";
import {ElMessage} from "element-plus";
import SimpleAxios from "@/http/request/SimpleAxios";
import router from "@/router";
import {onBeforeRouteLeave, onBeforeRouteUpdate} from "vue-router";
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
//得到页面中用来装编辑器的div
const editorContent = ref(null);

const categoryArr=ref([]);

const video = ref({title:"",coverUrl:"",videoUrl:""})

const TagList = ref([{tagName:'大量快速'}])

const isUpdateCover = ref(false)

const loadCategories = ()=>{
  TokenAxios.get('http://124.71.182.39:26000/categories/tree')
      .then((response)=>{
        if (response.state===20000){
          categoryArr.value=response.data;
        }
      })
}

const handleChange = (value)=> {
  // value就是选中的值
  // 您可以在这里将value赋值给video的上传参数
  // console.log(typeof value)
  video.value.categoryId=parseInt(value[value.length - 1]);
}

const loginInfo = ref(getUser());
const headers = {
  'Authorization': loginInfo.value.token
};
// const handleChange = (value)=> {
//   // value就是选中的值
//   // 您可以在这里将value赋值给video的上传参数
//   // console.log(typeof value)
//   video.value.categoryId=parseInt(value[value.length - 1]);
//   video.value.videoUrl = localStorage.getItem('returnUrl');
// }

const handleClose = () => {
  isUpdateCover.value=false;
}

onMounted(()=>{
  loadCategories();
  let id = new URLSearchParams(location.search).get('id');
  TokenAxios.get('http://124.71.182.39:26000/video/detail/'+id)
  .then((response)=>{
    if (response.state===20000){
      video.value=response.data;
      console.log(video.value)
    }
  })
})

// //和页面元素绑定的内容对象
const handleRemove = (uploadFile, uploadFiles) => {
  // video.value.coverUrl = null;
  console.log(uploadFile, uploadFiles)
  //TODO 删除库中的数据
  // let url = uploadFile.response.data;
  // axios.post('http://localhost:8080/v1/remove?url='+url)
  //     .then((response)=>{
  //         if (response.data.code===1){
  //             console.log("服务器图片删除完成！")
  //         }
  //     })
}

const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true
}

const handleSuccess = (response, uploadFile, uploadFiles) => {
  video.value.coverUrl = response.data;
  ElMessage.success("成功上传封面")
  isUpdateCover.value=false;
}


const postContent = ()=>{
  //发请求
  TokenAxios.post('http://124.71.182.39:26000/video/update',video.value)
      .then((response)=>{
        if (response.state===20000){
          //跳转到成功发布页面
          router.push('/')
        }else {
          ElMessage.error(response.message)
        }
      })
}
</script>

<style scoped>

</style>